
import React, { Component } from 'react'
import './css/02-table-swich.css';
import Firm from './maizuocomponent/Firm'
import Cinema from './maizuocomponent/Cinema'
import Center from './maizuocomponent/Center'
import Tabbar from './maizuocomponent/Tabbar'
import Navbar from './maizuocomponent/Navbar'

export default class App extends Component {

  state = {
    current: 0
  }

  render() {
    return (
      <div>
        <Navbar myevent={() => {
          console.log("navbar-center", "告诉tabbar去切换到tabbar");
          this.setState({
            current:2
          })
          // 不好搞。。。
        }} />
        {
          this.state.current === 0 && <Firm></Firm>
        }
        {
          this.state.current === 1 && <Cinema></Cinema>
        }
        {
          this.state.current === 2 && <Center></Center>
        }
        
        {/* <ul>
          {
            this.state.list.map(
              (item,index)=> <li key={item.id} className={this.state.current === index ? 'active' : ''} onClick= {() => {
                this.handleClick(index)
              }}>{item.text}</li>)
          }
        </ul> */}

        <Tabbar myevent = {
          (index) => {
          console.log("父组件定义，", index)
          this.setState({
            current: index
          })
        }}/>

      </div>
    )
  }

  handleClick = (index) =>{
    this.setState({
      current: index
    })
  }
}
